<template>
  <div>
    <div ref="mainRef" class="main"></div>
    <div>
      <n-input ref="nInputRef" v-model="diyStore.creationData" :text-uid="diyStore.textSource" />
      <n-textarea ref="nTextareaRef" v-model="diyStore.creationData" :text-uid="diyStore.textSource" />
      <n-file ref="nFileRef" accept="image/*"></n-file>
      <n-file ref="nJsonFileRef" accept="application/json"></n-file>
    </div>
  </div>
</template>

<script setup lang="ts">
import useMainStore from '@renderer/store/modules/useMainStore'
import init from '@renderer/utils/init'
import * as PIXI from 'pixi.js'
import { ref, onMounted } from 'vue'
import '@renderer/utils/bundle'
import Bg from './Bg'
import CardBook from './CardBook'
import Card from './Card'
import Logo from './Logo'
import Diy from './Diy'
import SetDialog from './SetDialog'
import NInput from '@renderer/components/NInput/index.vue'
import NTextarea from '@renderer/components/NTextarea/index.vue'
import NFile from '@renderer/components/NFile/index.vue'
import useDiyStore from '@renderer/store/modules/useDiyStore'
const mainStore = useMainStore()
const diyStore = useDiyStore()

const mainRef = ref<HTMLDivElement | null>(null)
const nInputRef = ref<InstanceType<typeof NInput> | null>(null)
const nTextareaRef = ref<InstanceType<typeof NTextarea> | null>(null)
const nFileRef = ref<InstanceType<typeof NFile> | null>(null)
const nJsonFileRef = ref<InstanceType<typeof NFile> | null>(null)
await init()
const app = await mainStore.getApp()
onMounted(async () => {
  mainRef.value!.appendChild(app.canvas)
  // 图鉴与DIY主容器
  const container = new PIXI.Container({
    label: 'main',
  })
  const mainStore = useMainStore()
  container.scale.set(mainStore.scale)
  app.stage.addChild(container)
  await Bg() // 绘制背景
  await CardBook() // 绘制卡册
  await Logo() //绘制Logo
  const { diySetContainer } = await SetDialog() // 设置窗口
  await Card() // 绘制卡牌
  await Diy() // 绘制DIY界面
  container.addChild(diySetContainer)
  mainStore.setNInput(nInputRef.value!)
  mainStore.setNTextarea(nTextareaRef.value!)
  mainStore.setNFile(nFileRef.value!)
  mainStore.setNJsonFile(nJsonFileRef.value!)
})
</script>

<style scoped>
.main {
  font-family: 'RZFont';
}
</style>
